<template>
  <div>
    <x-header :left-options="{showBack: false}" theme="">电子计划书</x-header>
    <div class="result resultIcon">
      <img src="static/image/pdf.png" alt="电子计划书" style="width: 93px;">
    </div>
    <div class="result resultFlag" style="color:#EA5A49">
      <span>已生成</span>
    </div>
    <div class="result resultTime">
      <span>2017-11-29 14:55:23</span>
    </div>
    <div style="padding: 30px 10px">
      <a class="preViewBtn" type="button" style="text-decoration: none;color:white" :href="url"
         target="_blank">预览</a>
      <a v-if="ios" class="goBackBtn" type="button" style="text-decoration: none;color:#EA5A49;margin-top: 10px"
         @click="goBack">返回主页</a>
      <a v-if="!ios" class="downloadBtn" type="button" style="text-decoration: none;color:#EA5A49;margin-top: 10px"
         :href="url">下载（.pdf）</a>
    </div>
  </div>
</template>
<script>
  import {XHeader} from 'Vux'
  export default {
    components: {
      XHeader
    },
    data(){
      return {
        ios: false,
        riskNo: null,
        url: null
      }
    },
    methods: {
      goBack(){
        this.$router.push('/home');
        this.$store.commit('CHANGE_TRANSITION', 'right')
      }
    },
    mounted(){
      let ios = window.navigator.userAgent.toLowerCase().match(/iPhone/i);
      let android = window.navigator.userAgent.toLowerCase().match(/android/i);
      if (ios) {
        this.ios = true
      } else if (android) {
        this.ios = false
      }
      this.riskNo = this.$store.state.app.submitRiskNo;
      if (this.riskNo) {
        this.url = "../api/pdf/getElecPlanBook/" + this.riskNo
      }
    }
  }
</script>
<style scoped>
  .downloadBtn {
    background-color: white;
    min-heigh: 44px;
    display: block;
    clear: both;
    border: 1px solid #EA5A49;
    border-radius: 4px;
    vertical-align: top;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 42px;
    cursor: pointer;
    margin: 0;
    padding: 0 12px;
    min-width: 52px;
    position: relative;
  }

  .goBackBtn {
    background-color: white;
    min-heigh: 44px;
    display: block;
    clear: both;
    border: 1px solid #EA5A49;
    border-radius: 4px;
    vertical-align: top;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 42px;
    cursor: pointer;
    margin: 0;
    padding: 0 12px;
    min-width: 52px;
    position: relative;
  }

  .preViewBtn {
    background-color: #EA5A49;
    min-heigh: 44px;
    border: 1px solid #EA5A49;
    display: block;
    clear: both;
    border-radius: 4px;
    vertical-align: top;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 42px;
    cursor: pointer;
    margin: 0;
    padding: 0 12px;
    min-width: 52px;
    position: relative;
  }

  .downloadBtn:after {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    content: ' ';
  }

  .preViewBtn:after {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    content: ' ';
  }

  .page-content img {
    padding: 0 10px 10px 10px;
    width: 100%;
  }

  .lightbox {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 7;
    opacity: 0.3;
    background-color: rgb(0, 0, 0);
    display: none;
  }

  .pop, iframe {
    position: absolute;
    left: 50%;
    top: 0;
    width: 893px;
    height: 100%;
    margin-left: -446.5px;
    z-index: 9;
  }

  .resultIcon {
    margin-top: 50px;
  }

  .result {
    text-align: center;
  }

  .resultFlag {
    font-size: 1.3rem;
    margin-top: 10px;
  }

  .resultTime {
    font-size: 14px;
    margin-top: 10px;
    color: #ddd
  }
</style>
